<!DOCTYPE html>
<html>  
	<head>
		<meta charset="utf-8" />
		<style type="text/css">
			body, html { 
				font-family:helvetica,arial,sans-serif; 
				font-size:90%;
				width:100%;
				height:100%;
				margin:0;
				padding:0;
			}
			.silhouette_table_container {
				width:100%;
				height:100%;
			}
			.silhouette_td_container {
				text-align:left;
				vertical-align:top;
			}
			/* The original CSS rules in singlepreviewer.js assume images are
				located at preview/images but Maqetta server injects an extra
				app/ folder in URL so we need to override background-image URLs. */
			#preview_app_body .control_angle_cw {
				background-image: url(app/preview/images/rotate_cw.png);
			}
			#preview_app_body .control_angle_ccw {
				background-image: url(app/preview/images/rotate_ccw.png);
			}
			#preview_app_error {
				display:none;
				margin:20px;
				font-size:125%;
				font-weight:bold;
				font-style:italic;
				color:#8B0000;
			}
			#preview_which_file {
				margin-bottom: -10px;
				padding: 5px 0 0 5px;
				color: black;
				opacity: .85;
				text-align: center;
			}
			#preview_which_file_filename {
				text-decoration:none;
				color:black;
			}
			#preview_which_file_filename:hover {
				text-decoration:underline;
				color:blue;
			}
		</style>

		<script src="app/dojo/dojo.js" data-dojo-config="async:true,packages:[{name:'preview', location:'../preview'}]"></script>
		<link rel="stylesheet" type="text/css" href="app/dijit/themes/claro/claro.css"/>
		<script>
			require(['preview/singlepreview', 'dojo/i18n!davinci/nls/webContent', 'dojo/domReady!'], function(SinglePreview, localizations) {
				//FIXME: Pull from server instead of hardcode
				var devicelist=[
						{value:"0", label:'android_340x480', file:'app/preview/images/android_340x480.svg'},
						{value:"1", label:'android_480x800', file:'app/preview/images/android_480x800.svg'},
						{value:"2", label:'androidtablet', file:'app/preview/images/androidtablet.svg'},
						//bbplaybook.svg is currently broken: rotated 90 degrees
						//{value:"3", label:'bbplaybook', file:'app/preview/images/bbplaybook.svg'},
						{value:"3", label:'blackberry', file:'app/preview/images/blackberry.svg'},
						{value:"4", label:'ipad', file:'app/preview/images/ipad.svg'},
						{value:"5", label:'iphone', file:'app/preview/images/iphone.svg'}
					],
					currentDevice = "0",
					iframefilename = '',
					iframeSearch = '',
					orientation = 'portrait',
					scalefactor = 1,
					showZoom = true;

				var initSinglePreview = function() {
					// fill object urlparams with URL parameters
					var urlparams_array = window.location.search.substring(1).split("&");
					var urlparams = {};
					for (var i=0; i<urlparams_array.length; i++){
						var param=urlparams_array[i].split('=');
						if(param.length==2){
							urlparams[param[0]] = decodeURIComponent(param[1]);
						}	
					}
					
					if(urlparams.file){
						iframefilename = urlparams.file;
						document.getElementById('preview_which_file_label').innerHTML = localizations.devicePreviewPreviewing;
						var preview_which_file_filename = document.getElementById('preview_which_file_filename');
						preview_which_file_filename.innerHTML = iframefilename;
						preview_which_file_filename.setAttribute('href', iframefilename);
					}else{
						var error_div = document.getElementById('preview_app_error');
						error_div.innerHTML = localizations.devicePreviewError;
						error_div.style.display = "block";
					}
					if(urlparams.orientation){
						orientation = urlparams.orientation;
					}
					if(urlparams.device){
						// Verify the device is in our list
						for(var i=0; i<devicelist.length; i++){
							if(urlparams.device==devicelist[i].label){
								currentDevice = i+"";	// String values required
								devicelist[i].selected=true;
								break;
							}
						}
					}
					if(urlparams.scalefactor){
						scalefactor = urlparams.scalefactor;
					}
					if(urlparams.showZoom){
						showZoom = urlparams.showZoom;
					}
					if(urlparams.zazl){
						iframeSearch += "zazl=" + urlparams.zazl;
					}
					var singlepreview_container = document.querySelectorAll(".singlepreview_container")[0];
					window.singlepreview = new SinglePreview({
						devicelist: devicelist,
						currentDevice: currentDevice,
						iframefilename: iframefilename,
						iframeSearch: iframeSearch,
						orientation: orientation,
						scalefactor: scalefactor,
						showZoom: showZoom,
						margin: 20,
						pathToPreviewerFolder: '../'
					}, singlepreview_container);
				}
	
				// Used by test case in preview/test folder, not used by preview.html
				window.destroyRecreate = function(){
					singlepreview.destroy(true);
					initSinglePreview();
				}
	
				initSinglePreview();
			});
		</script>
		<link rel="shortcut icon" href="app/davinci/img/maqetta.png" />
	</head>
    
	<body class="claro" id="preview_app_body">
		<div id="preview_which_file">
			<span id='preview_which_file_label'></span>
			<a id='preview_which_file_filename'></a>
		</div>
		<div id="preview_app_error"></div>
		<table class="silhouette_table_container">
			<tr>
				<td class="silhouette_td_container">
					<div class="singlepreview_container">
					</div>
				</td>
			</tr>
		</table>
	</body>

</html>